import { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import "../index.less";
import { getMyWork, getWorkList } from "../service";
import { getCurrentUserInfo } from "@/utils/authority";
import { Badge } from "antd-mobile";

const urlList = [
  {
    label: "我的任务",
    imgs: "/images/servicePolicy/fw1.png",
    url: "/myWork",
  },
  {
    label: "消息中心",
    imgs: "/images/servicePolicy/fw2.png",
    url: "/serverMessege",
  },
  {
    label: "通讯录",
    imgs: "/images/servicePolicy/fw3.png",
    url: "/addressBook",
  },
  {
    label: "服务政策",
    imgs: "/images/servicePolicy/fw4.png",
    url: "/servicePolicy",
  },
];

const HomePage: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const userId = getCurrentUserInfo()?.data?.id;
  const [workListTot, setWorkListTot] = useState(0);

  const [detailsData, setDetailsData] = useState<any>({});
  const bygzList = [
    {
      label: "本月完成",
      number: detailsData?.completion || 0,
      imgs: "/images/servicePolicy/bygz1.png",
      url: "/communityService",
    },
    {
      label: "满意度",
      number: `${detailsData?.goodReviewRate || 0}%`,
      imgs: "/images/servicePolicy/bygz2.png",
      url: "/communityActivities?type=activities",
    },
  ];
  const getData = async () => {
    const params = {
      userId,
    };
    try {
      const { data } = await getMyWork(params);
      setDetailsData(data || {});
    } catch {}
  };
  const getListData = async () => {
    const params = {
      userId,
      whetherHandle: 0,
    };
    try {
      const { data } = await getWorkList(params);
      setWorkListTot(data?.service?.length || 0);
    } catch {}
  };
  useEffect(() => {
    getData();
    getListData();
  }, []);
  const goto = (url: string) => () => {
    navigate(url);
  };
  return (
    <div className="content organizationBox">
      <div className="imgBox">
        <img src="/images/banner@2x.png" alt="" />
      </div>
      <div className="xxtxBox">
        <span className="xxtxTitle">
          <img src="/images/lifecircle/sqydl.png" alt="" />
          消息提醒
        </span>
        <span className="tsxxBox" onClick={goto("/serverMessege")}>
          你有新的任务待处理..
        </span>
      </div>
      <div className="itemBox">
        {urlList?.map((item, index) => {
          return item.label !== "我的任务" ? (
            <div key={index} onClick={goto(item?.url)}>
              <img src={item?.imgs} alt="" />
              <div className="itemBoxTitle">{item?.label}</div>
            </div>
          ) : (
            <Badge content={workListTot}>
              <div key={index} onClick={goto(item?.url)}>
                <img src={item?.imgs} alt="" />
                <div className="itemBoxTitle">{item?.label}</div>
              </div>
            </Badge>
          );
        })}
      </div>
      <div className="bygzBox">
        <div className="title">本月工作</div>
        <div className="bygzBoxContent">
          {bygzList.map((item, index) => {
            return (
              <div
                key={index}
                // onClick={goto(item?.url)}
              >
                <div className="itemBoxTitle">
                  <img src={item?.imgs} alt="" />
                  {item?.label}
                </div>
                <div className="itemBoxNumber">{item?.number}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default HomePage;
